import React, { useState } from "react";
import { AppstoreOutlined, BellOutlined, GlobalOutlined, LogoutOutlined, FullscreenOutlined, FullscreenExitOutlined } from "@ant-design/icons";
import { Dropdown, Menu, Button } from "antd";

export default function Header({ onLogout }) {
  const [isFullscreen, setIsFullscreen] = useState(false);

  // 全屏切换
  const handleFullscreen = () => {
    if (!isFullscreen) {
      // 进入全屏
      const el = document.documentElement;
      if (el.requestFullscreen) el.requestFullscreen();
      else if (el.webkitRequestFullscreen) el.webkitRequestFullscreen();
      else if (el.mozRequestFullScreen) el.mozRequestFullScreen();
      else if (el.msRequestFullscreen) el.msRequestFullscreen();
      setIsFullscreen(true);
    } else {
      // 退出全屏
      if (document.exitFullscreen) document.exitFullscreen();
      else if (document.webkitExitFullscreen) document.webkitExitFullscreen();
      else if (document.mozCancelFullScreen) document.mozCancelFullScreen();
      else if (document.msExitFullscreen) document.msExitFullscreen();
      setIsFullscreen(false);
    }
  };

  // 监听全屏变化，自动同步状态
  React.useEffect(() => {
    const handler = () => {
      setIsFullscreen(!!document.fullscreenElement);
    };
    document.addEventListener("fullscreenchange", handler);
    return () => document.removeEventListener("fullscreenchange", handler);
  }, []);

  const menu = (
    <Menu>
      <Menu.Item key="messages" icon={<BellOutlined />}>
        查看消息盒
      </Menu.Item>
      <Menu.Item key="lang" icon={<GlobalOutlined />}>
        切换语言
      </Menu.Item>
      <Menu.Divider />
      <Menu.Item key="logout" icon={<LogoutOutlined />} onClick={onLogout}>
        退出登录
      </Menu.Item>
    </Menu>
  );

  return (
    <header style={{ background: "#222", color: "#fff", padding: 16, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
      <span style={{ fontWeight: "bold", fontSize: 20, display: "flex", alignItems: "center" }}>
        <AppstoreOutlined style={{ fontSize: 22, marginRight: 8 }} />
        系统标题
      </span>
      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
        <Button
          icon={isFullscreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
          onClick={handleFullscreen}
          style={{ marginRight: 8 }}
        />
        <Dropdown overlay={menu} placement="bottomRight" trigger={['click']}>
          <Button type="primary">操作</Button>
        </Dropdown>
      </div>
    </header>
  );
}